<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">表单组件</view>
		</w-navbar>

		<w-topTips ref="topTips"></w-topTips>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '20rpx' }">
			<w-form ref="form" :model="form" :rules="rules" labelPosition="center" labelWidth="160">
				<view class="block">
					<w-formItem prop="name" label="活动名称">
						<w-input v-model="form.name" placeholder="请输入活动名称"></w-input>
					</w-formItem>
					<w-formItem prop="nature" label="活动性质">
						<w-selectionBoxGroup v-model="form.nature">
							<w-selectionBox :value="item.value" v-for="(item, index) in natureArr" :key="index">
								{{ item.lable }}
							</w-selectionBox>
						</w-selectionBoxGroup>
					</w-formItem>
					<w-formItem prop="resources" label="特殊资源">
						<w-selectionBoxGroup v-model="form.resources">
							<w-selectionBox shape="round" :value="item.value" v-for="(item, index) in resourcesArr"
								:key="index">{{ item.lable }}</w-selectionBox>
						</w-selectionBoxGroup>
					</w-formItem>
				</view>
				<view class="block">
					<w-formItem prop="textarea" label="活动形式">
						<w-input type="textarea" v-model="form.textarea" placeholder="请输入活动名称"></w-input>
					</w-formItem>

					<w-formItem prop="upload" label="图片上传">
						<w-upload v-model="form.fileList"></w-upload>
					</w-formItem>
				</view>
			</w-form>
		</pageDemoBlock>
		<view class="p-2">
			<w-button type="primary" @click="submit">校验/提交</w-button>
		</view>

		<view class="block p-2">
			{{JSON.stringify(form, null, 4)}}
		</view>
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				natureArr: [{
						value: 'food',
						lable: '美食'
					},
					{
						value: 'push',
						lable: '地推'
					},
					{
						value: 'activity',
						lable: '活动'
					},
					{
						value: 'brand',
						lable: '品牌'
					}
				],
				resourcesArr: [{
						value: 'resources1',
						lable: '线上品牌商赞助'
					},
					{
						value: 'resources2',
						lable: '线下场地免费'
					}
				],
				form: {
					name: '',
					nature: [],
					resources: 'resources1',
					textarea: '今天又是元气满满的一天~~',
					fileList: [{
						url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3949990884,239318934&fm=26&gp=0.jpg'
					}]
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '活动名称必填项'
					},

					nature: {
						type: 'array',
						required: true,
						message: '最少选择一种活动性质'
					},
				}
			};
		},
		methods: {
			submit() {
				this.$refs.form.validate(result => {
					if (result.valid) {
						this.$refs.topTips.show({
							type: 'success',
							title: '验证成功!'
						})
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.block {
		margin: 20rpx 0;
		background-color: #fff;
		word-break: break-all;
		word-wrap: break-word;
	}
</style>
